<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<html:xhtml />
<script type="text/javascript">
    $(document).ready(function() {
        // Init help dialogs
        $("#helpDialog").dialog({
            autoOpen: false,
            position: "right"
        });
        $("#helpButton").click(function() {
            $("#helpDialog").dialog("open");
        });

        // 'DataTablize' the table
        $("#snpTable").dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bFilter": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "aoColumns": [{"sType": "html"},
                {"sType": "html"},
                {"sType": "numeric" },
                {"bSearchable": false},
                {"bSearchable": false},
                {"bSearchable": false},
                {"bSearchable": false}]
        });
    });
</script>
<div id="snpList" class="content list">
    <html:form action="searchSubmit">
        <div class="input">
            <dl>
                <dt>Search SNP:</dt>
                <dd><html:text property="searchText" />&nbsp;<html:submit property="submitType" value="Search" /></dd>
            </dl>
            <html:hidden property="searchSelect" value="1" />
        </div>
    </html:form>
    <h2>
        SNP List <span id="helpButton" class="ui-icon help ui-icon-info">&nbsp;&nbsp;&nbsp;</span>
    </h2>
    <p>Select a SNP to view a summary of the results</p>
    <table id="snpTable" cellpadding="0" cellspacing="0" border="0" class="display">
        <thead>
            <tr>
                <!-- GOTCHA: Manually adding 'ui-state-default' classes to match appearance.
                     NOTE: There were couple old forum threads that stated that dataTable cannot
                     handle multiple th's in a row. This table, with two th's in each column seems
                     to be working now. However, this might cause a problem in future changes. -->
                <th colspan="3" class="ui-state-default">&nbsp;</th>
                <th colspan="4" class="ui-state-default">Genotyping Status</th>
            </tr>
            <tr>
                <th>RS number</th>
                <th>Gene</th>
                <th>Chromosome</th>
                <logic:iterate id="cohort" name="snpListForm" property="cohortList" indexId="i" length="4">
                    <th><bean:write name="cohort" property="name"/></th>
                </logic:iterate>
            </tr>
        </thead>
        <tbody>
            <logic:iterate id="snpInfo" name="snpListForm" property="snpList">
                <tr>
                    <td>
                        <a href="<html:rewrite page="/snpSummary.do" />?rsNumber=<bean:write name="snpInfo" property="snp.rsNumber" />">
                            <bean:write name="snpInfo" property="snp.rsNumber" />
                        </a>
                    </td>
                    <td>
                        <a href="<html:rewrite page="/geneSummary.do" />?geneName=<bean:write name="snpInfo" property="snp.gene.name" />">
                            <bean:write name="snpInfo" property="snp.gene.name" />
                        </a>
                    </td>
                    <td><bean:write name="snpInfo" property="snp.chromosome" /></td>
                    <logic:iterate id="status" name="snpInfo" property="statusList" indexId="i" length="4">
                        <td>
                            <logic:notEmpty name="status">
                                <logic:equal name="status" property="valid" value="true">
                                    <div title="Passed" class="ui-icon passed ui-icon-check" />
                                </logic:equal>
                                <logic:notEqual name="status" property="valid" value="true">
                                    <div title="Failed" class="ui-icon failed ui-icon-closethick" />
                                </logic:notEqual>
                            </logic:notEmpty>
                            <logic:empty name="status">
                                <div title="Not Available" class="ui-icon na ui-icon-help" />
                            </logic:empty>
                        </td>
                    </logic:iterate>
                </tr>
            </logic:iterate>
        </tbody>
    </table>
</div>
<div id="helpDialog" title="SNP List">
    <p>
        The <em>SNP List</em> page contains an information table for SNPs that were found
        in a gene selected through the Gene List Page or those that matched
        the search criteria entered in the SNP Search Page.
    </p>
    <p>
        The table displays the rsnumber, gene, chromosome, and genotyping status
        for each SNP. The genotyping status shows if the SNP passed genotyping QC
        for each cohort or if the SNP was not genotyped. The table can be
        sorted by any of columns by clicking on the column header.
    </p>
</div>